<template>
  <div class="pictures-browser">
    <!-- 图片浏览器分为三个部分 上中下 -->
    <div class="top">
      <div class="close-btn" @click="goBack">
        <Close></Close>
      </div>
    </div>
    <div class="center">
      <div class="controls">
        <div
          class="prev"
          @click="handlePrev"
          :style="{ cursor: disPrev ? 'not-allowed' : 'pointer' }"
        >
          <ArrowLeft></ArrowLeft>
        </div>
        <div
          class="next"
          @click="handleNext"
          :style="{ cursor: disNext ? 'not-allowed' : 'pointer' }"
        >
          <ArrowRight></ArrowRight>
        </div>
      </div>
      <div class="picture">
        <img
          :src="pictures[currentIndex].url"
          alt=""
          :key="currentIndex"
          @click="changeIsShowPictureList"
        />
      </div>
    </div>
    <div
      class="bottom"
      :style="{ height: isShowPictureList ? '75px' : '5px' }"
    >
      <div class="preview">
        <div class="desc">
          <!-- <div class="left">{{ currentIndex + 1 }} / {{ pictures.length }}</div> -->
          <!-- <div class="right" @click="changeIsShowPictureList">
            {{ isShowPictureList ? "隐藏" : "显示" }}图片列表
          </div> -->
        </div>
        <div
          class="preview-list"
          :style="{ height: isShowPictureList ? '67px' : '0px' }"
        >
          <Indicator :index="currentIndex" v-if="pictures">
            <div
              class="preview-item"
              v-for="(item, index) in pictures"
              :key="index"
              :class="{ active: currentIndex === index }"
              @click="setCurrentIndex(index)"
            >
              <img :src="item.url" alt="" />
            </div>
          </Indicator>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Close from "../../assets/svg/close.vue";
import ArrowLeft from "../../assets/svg/arrow-left.vue";
import ArrowRight from "../../assets/svg/arrow-right.vue";
import Indicator from "../../components/indicator/index.vue";

export default {
  data() {
    return {
      isNext: false,
      currentIndex: 0,
      isShowPictureList: true,
      disPrev: true,
      disNext: false,
    };
  },
  props: {
    pictures: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    document.body.style.overflow = "hidden";
  },
  beforeDestroy() {
    document.body.style.overflow = "auto";
  },
  methods: {
    goBack() {
      // 使用$router.go(-1)实现浏览器的后退功能
      this.$router.go(-1);
    },
    handlePrev() {
      this.isNext = false;
      // 如果禁用点击事件，则不执行点击操作
      if (this.disPrev) {
        return;
      }
      this.disNext = false;
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = 0;
        this.$message({
          type: "warning",
          message: "已经是第一张",
        });
        this.disPrev = true;
      }
      console.log("Title:", title);
    },
    handleNext() {
      this.isNext = true;
      // 如果禁用点击事件，则不执行点击操作
      if (this.disNext) {
        return;
      }
      this.disPrev = false;
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.pictures.length - 1) {
        this.currentIndex = this.pictures.length - 1;
        this.$message({
          type: "warning",
          message: "已经是最后一张",
        });
        this.disNext = true;
      }
    },
    changeIsShowPictureList() {
      this.isShowPictureList = !this.isShowPictureList;
    },
    setCurrentIndex(index) {
      if (index > this.currentIndex) {
        this.isNext = true;
      }
      if (index < this.currentIndex) {
        this.isNext = false;
      }
      this.currentIndex = index;
    },
  },
  components: {
    Close,
    ArrowLeft,
    ArrowRight,
    Indicator,
  },
};
</script>

<style scoped lang="scss">
.pic-enter-from {
  opacity: 0;
  transform: translateX(100%);
}
.pic-enter-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pic-leave-active {
  transition: opacity 0.2s ease;
}

.pic-enter-to,
.pic-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.pic-leave-to {
  opacity: 0;
  transform: translateX(0);
}

.pic2-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}
.pic2-enter-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pic2-leave-active {
  transition: opacity 0.2s ease;
}

.pic2-enter-to,
.pic2-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.pic2-leave-to {
  opacity: 0;
  transform: translateX(0);
}
.pictures-browser {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #333;
  display: flex;
  flex-direction: column;
  /* 顶部区域 关闭按钮 */
  .top {
    position: relative;
    width: 100%;
    height: 5px;
    .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      color: red;
      cursor: pointer;
      z-index: 10;
    }
  }

  /* 中间区域 展示图片 */
  .center {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    color: #fff;
    .controls {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .prev,
      .next {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
        cursor: pointer;
      }
    }
    .picture {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden;
      img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        height: 100%;
        user-select: none;
        object-fit: cover;
      }
    }
  }

  /* 底部图片 指示器 */
  .bottom {
    display: flex;
    justify-content: center;
    color: #fff;
    height: 100px;
    transform: translateY(8px); /* 向下偏移 */
    .preview {
      position: absolute;
      bottom: 10px;
      max-width: 200vh;
      .desc {
        display: flex;
        justify-content: space-between;
        .right {
          cursor: pointer;
        }
      }
      .preview-list {
        margin-top: 3px;
        overflow: hidden;
        transition: height 300ms ease;
        .preview-item {
          margin-right: 5px;
          cursor: pointer;
          img {
            height: 67px;
            opacity: 0.5;
          }
          &.active {
            img {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
// 鼠标滑过变大
.preview-item img {
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.preview-item:hover img {
  transform: scale(1.2); /* 鼠标滑过时放大到1.2倍 */
}
</style>
